<template>  
  <div class="conditionWarp">
    <div class="condition-show">
      <span>城市：</span>
      <span class="condition-show-result">{{getFilterName()}}</span>
      <i class="ivu-icon ivu-icon-arrow-down-b ivu-select-arrow"></i>
    </div>
    <div class="condition-down">
      <div class="condition-down-items" @click.stop="warpClick">
        <div class="condition-down-title">城市</div>
        <div  class="condition-down-overDiv productUl">
          <ul>
            <li>
              <input type="radio" v-model="cityId" class="condition-down-checkbox" value="-1" id="cityId">
              <label for="cityId" @click.stop="handleChooseCity()" >不限</label>
            </li>
            <li v-for = "(item,index) in cityList" :key = "index" v-if="index<numObj.cityNum">
              <input type="radio" v-model="cityId" class="condition-down-checkbox" :value="item.id" :id="'city'+item.id" >
              <label :for="'city'+item.id" @click.stop="handleChooseCity(item.id)" :title="item.name">{{item.name}}</label>
            </li>
            <li v-if="cityList.length>13">
              <div class="open" @click="handleOpen(cityList,numObj.cityNum,'cityNum')">
                <span v-if="numObj.cityNum==12">展开</span>
                <span v-if="numObj.cityNum>12">收起</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import Helper from '@/common/helper'
import Rest from '@/rest'
import Api from '@/api'

export default {
  name: 'editPanel',
  data () {
    return {
      cityId: '',
      cityList:[],
      numObj:{
        cityNum: 12,
      },
      backUpCityId: "",
    }
  },
  props: {
   
  },
  methods:{
    init(cityId){
      var that = this;
      that.resetInit();
      if(cityId){
        if(cityId != '-1' && cityId != -1){
          that.getCityList(()=>{
            that.cityId = cityId;
          });
        }
      }else{
        that.getCityList();
      }
    },
    resetInit(){
      var that = this;
      that.cityId = "-1";
      that.cityList = [];
    },
    // 获取事业部列表
    getCityList(callBack) {
      var that = this;
      var restApi = Api.caseManage.case.city;
      Rest.get(restApi).done(function(res) {
        if (Helper.isSuccess(res)) {
          if (res.data.orgVo) {
            that.cityList = res.data.orgVo;
            if(callBack) callBack();
          } else {
            that.cityList = [];
          }
        } else {
          that.cityList = [];
          that.$Message.error(res.status.msg);
        }
      });
    },
    // 更多和收起
    handleOpen(list,num,key){
      var that = this;
      if(num == 12){
        that.numObj[key] = list.length;
      }else{
        that.numObj[key] = 12;
      }
    },
    handleChooseCity(cityId) {
      var that = this;
      if(that.backUpCityId != cityId){
        that.backUpCityId = cityId;
        that.$emit('handleChooseCity',cityId)
      }
    },
    getFilterName(){
      var that = this;
      var result = '';
      if(that.cityList && that.cityList.length>0 && that.cityId != '-1'){
        result = Helper.getName(that.cityList,'id',that.cityId,'name');
      }else{
        result = '不限'
      }
      return result;
    },
    warpClick() {}
  },
  created() {
    this.init();
  },
  activated() {
    // this.init();
  },
}
</script>

<style lang="scss" scoped>
  @import "../../assets/sass/install";
  .conditionWarp{
    display: inline-block;
    width: 180px;
    height: 33px;
    color: #657180;
    position: relative;
    line-height: normal;
    .condition-show{
      display: block;
      height: 32px;
      line-height: 29px;
      padding-left: 8px;
      padding-right: 15px;
      box-sizing: border-box;
      outline: none;
      user-select: none;
      cursor: pointer;
      position: relative;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #d7dde4;
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
      .condition-show-result{

      }
    }
    .condition-down{
      display: none;
      position: absolute;
      top: 33px;
      left: 0;
      @include transition(500ms);
      @include radius(3px);
      max-height: 480px;
      width: 630px;
      overflow: auto;
      overflow-x: hidden;
      /*margin: 5px 0;*/
      padding: 15px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      .condition-down-items {
        .condition-down-title {
          font-size: 16px;
          color: #8c8c8c;
          margin-left: 4px;
          margin-bottom: 5px;
        }
        .condition-down-overDiv{
          position: relative;
          .open{
            cursor: pointer;
            color: #02b0f0;
            font-size: 14px;
          }
        }
        ul {
          font-size: 0;
          width: 625px;
          overflow: hidden;
          li {
            font-size: 14px;
            margin-right: 6px;
            margin-bottom: 6px;
            display: inline-block;
            vertical-align: top;
            background-color: #f5f5f5;
            color: #2b3545;
            height: 32px;
            line-height: 32px;
            width: 80px;
            text-align: center;
            @include radius(3px);
            overflow: hidden;
            position: relative;
            label {
              display: block;
              padding: 0 10px;
              cursor: pointer;
              @include transition(500ms);
              max-width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .lable{
              &:hover{
                color: #02b0f0;
              }
            }
            .curlable{
              color: #fff;
              background-color: #02b0f0;
            }
            .condition-down-checkbox {
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0;
              visibility: hidden;
              &:checked+label {
                color: #fff;
                background-color: #02b0f0;
                &:hover {
                  color: #fff;
                }
              }
              &:hover+label {
                color: #02b0f0;
              }
            }
            .cur {
              color: #02b0f0;
            }
          }
        }
      }
    }
    &:hover{
      .condition-down{
        display: inline-block;
      }
      .ivu-select-arrow{
        @include rotate(180deg)
      }
      .condition-show{
        border-color: #35c0f3;
        outline: 0;
        box-shadow: 0 0 0 2px rgba(2,176,240,.2);
      }
    };
  }
</style>
